<template>
  <view class="content">
      <tui-navigation-bar splitLine @init="initNavigation" title="在建项目"></tui-navigation-bar>
    <!-- 导航栏占位符，防止内容塌陷 -->
    <view :style="{ height: navBarHeight+'px' }"></view>
    <scroll-view scroll-y="true">
      <tui-card v-for="(item,index) in projectInProgress" @click="toIndex(item)" :key="index" class="card">
        <view class="tui-default-title">{{item.projectName}}</view>
        <template v-slot:body>
          <view class="tui-default">
            <view class="">工程造价: <text>{{item.cost}}万元</text></view>
            <view class="">项目状态: <text>{{item.projectStatus}}</text></view>
            <view class="">剩余工期: <text>{{calculateTotalDays(item.planStartDate,item.planEndDate)}}天</text>
            </view>
            <view class="">工程地址: <text>{{item.address}}</text></view>
          </view>
        </template>
      </tui-card>
    </scroll-view>
  </view>

</template>

<script setup lang="ts">
  import { ref, reactive, onMounted} from 'vue';
  import {getModuleInProject,getProjectViewList} from '@/apis/projectInfo.js'
  const projectInProgress = reactive([])
  const top = ref(0)
  const navBarHeight =uni.getStorageSync('systemInfo').statusBarHeight+60
  const initNavigation = (e) => {
    top.value = e.top;
  }
  const toIndex = (item : any) => {
    uni.setStorageSync('projectInfo', item)
    //获取菜单列表
	
    getModuleInProject(item.id).then(res => {
      uni.setStorageSync('userRoleInProject', res.data.data)
    })
    uni.switchTab({
      url: `/pages/index/index`
    })
  }

  //计算工期
  const calculateTotalDays = (startDate, endDate) => {
    const start = new Date(startDate);
    const end = new Date(endDate);
    const timeDifference = end - start;
    const dayDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
    return dayDifference;
  };

  onMounted(() => {
    //获取在建项目
    getProjectViewList(1,-1).then(res => {
      projectInProgress.splice(0, projectInProgress.length, ...res.data.data)
    })
  })
</script>

<style lang="scss" scoped>
  .content {
    height: 100vh;
    background-color: #f1f1f1;
    // padding: 30px 0;

    .card {
      border-radius: 10px;
      margin-bottom: 30rpx;

      .tui-default-title {
        font-size: 18px;
        background-color: pink;
        font-weight: bold;
        padding: 20rpx 30rpx;
      }

      .tui-default {
        padding: 20rpx 30rpx;
        background-color: #f18d8f;
      }
    }
  }
</style>